<template>
  <a-modal
    destroyOnClose
    title="选择店铺"
    v-model="visible"
    :afterClose="closeModel"
    :width="900"
    @ok="onOk"
    @cancel="onCancel()"
    :closable="false"
    :maskClosable="false"
  >
    <a-row align="middle" style="margin-bottom: 10px">
      <a-space class="search-item">
        店铺名称：
        <a-input v-model="queryParam.name" placeholder="搜索店铺名称" />
      </a-space>
      <a-space class="search-item">
        电话：
        <a-input v-model="queryParam.mobile" placeholder="搜索电话" />
      </a-space>
      <a-space class="search-item">
        店铺分类：
        <a-select v-model="queryParam.category_id" style="width:120px">
          <a-select-option value="-1"> 全部 </a-select-option>
          <a-select-option :value="item.id" v-for="item in categoryInfo" :key="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-space>
      <a-space class="search-item">
        <a-button @click="onSearch" type="primary"> 搜索 </a-button>
      </a-space>
    </a-row>
    <s-table rowKey="id" size="default" :columns="columns" :data="loadData" ref="toolsStoreTable">
      <div slot="storeInfo" slot-scope="text, record">
        <div class="name">
          <div class="pic">
            <img :src="record.logo" alt="" />
          </div>
          <div class="info">
            <span>{{ record.name }}</span>
            <span>{{ record.cat_name }}</span>
          </div>
        </div>
      </div>
      <div slot="storeAdminInfo" slot-scope="text, record">
        <div class="name" v-if="record.admin_saas_user">
          <div class="pic">
            <img :src="record.admin_saas_user.avatar" alt="" />
            <a-avatar shape="square" :size="64" icon="user" />
          </div>
          <div class="info">
            <span>{{ record.admin_saas_user.name }}</span>
            <span>{{ record.admin_saas_user.mobile }}</span>
          </div>
        </div>
        <span v-else>暂无信息</span>
      </div>
      <div slot="action" slot-scope="text, record">
        <a-checkbox :checked="selectStoreList.indexOf(record.id + '') !== -1" @change="e => onChange(e, record)" />
      </div>
    </s-table>
  </a-modal>
</template>

<script>
import { getList, getCategoryInfo } from '@/api/store'
import { STable } from '@/components'

export default {
  components: {
    STable
  },
  data () {
    return {
      visible: false,
      columns: [
        {
          title: '店铺ID',
          dataIndex: 'id'
        },
        {
          title: '店铺信息',
          scopedSlots: { customRender: 'storeInfo' }
        },
        {
          title: '店主信息',
          scopedSlots: { customRender: 'storeAdminInfo' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '100px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      categoryInfo: [],
      selectStoreList: [],
      okList: [],
      list: [],
      queryParam: {
        name: '',
        category_id: '-1',
        mobile: ''
      },
      loadData: (parameter) => {
        const { queryParam: data } = this
        return getList({ ...parameter, ...data })
          .then((res) => {
            return res.data
          })
          .catch((err) => {
            this.$message.error(err.message)
            this.$refs.toolsStoreTable.localLoading = false
          })
      }
    }
  },

  props: {
    selectedList: {
      type: Array,
      default: () => []
    },
    checkList: {
      type: Array,
      default: () => []
    }
  },

  watch: {
    visible: {
      immediate: true,
      handler (newVal, oldVal) {
        if (newVal && this.checkList.length) {
          const list = []
          this.checkList.forEach((item) => {
            list.push(item + '')
          })
          this.selectStoreList = list
          this.okList = this.selectedList
        }
      }
    }
  },
  created () {

  },
  mounted () {
    this.getCategoryInfo()
  },
  methods: {
    // 获取全部商城分类
    getCategoryInfo () {
      getCategoryInfo({}).then((res) => {
        if (res.code == 0) {
          this.categoryInfo = res.data
        }
      })
    },
    onCancel () {
      this.visible = false
    },
    onOk () {
      this.visible = false
      this.$emit('onOk', this.selectStoreList, this.okList)
    },
    closeModel () {
      this.selectStoreList = []
      this.okList = []
    },
    onSearch () {
      this.$refs.toolsStoreTable.refresh(1)
    },
    onChange (e, item) {
      if (e.target.checked) {
        this.selectStoreList.push(item.id + '')
        this.okList.push({
          id: item.id,
          name: item.name
        })
      } else {
        const index = this.selectStoreList.indexOf(item.id + '')
        this.selectStoreList.splice(index, 1)
        this.okList.splice(index, 1)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.search-item {
  margin-left: 10px;
}
.name {
  display: flex;
  align-items: center;
  .pic {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 24px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .info {
    flex: auto;
    width: 0;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    span {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    span:nth-child(2) {
      color: rgba(0, 0, 0, 0.45);
      margin-top: 6px;
    }
  }
}
</style>
